<template>
  <div>
    <button @click="count++">count: {{ count }}</button>
    <button @click="age++">age: {{ age }}</button>
    <button @click="person.name += '!'">Name: {{ person.name }}</button>
    <button>Age: {{ person.age }}</button>
  </div>
</template>

<script>
import { onMounted, onUpdated, reactive, ref, onRenderTracked } from "vue";
import MyButton from "./MyButton.vue";

export default {
  components: {
    MyButton,
  },

  setup() {
    const count = 10;
    const age = ref(19);

    const person = reactive({ name: "张三", age: 100 });

    onRenderTracked((e) => {
      console.log("App 收集", e);
    });

    onMounted(() => {
      person.age++;
    });

    onUpdated(() => {
      console.log("App onUpdated");
    });

    return {
      count,
      age,
      person,
    };
  },

  // setup() {
  //   const count = ref(10);

  //   onUpdated(() => {
  //     console.log("App onUpdated");
  //   });

  //   /**
  //    * 当我们一些数据发生变化，然后页面没有更新，或更新的生命周期钩子
  //    * 没有被触发时，可以通过该钩子来判断这个数据是否属于当前组件的一个
  //    * 依赖
  //    */
  //   onRenderTracked((e) => {
  //     console.log("App 收集", e);
  //   });

  //   return {
  //     count,
  //   };
  // },
};
</script>
